<template>
  <div class="home" style="padding: 20px 0;">
    <div class="rowClas rowOne">
      <div class="item itemLeft" style="padding: 0 0 0 10px; width:50%;">
        <p><i></i><span>菜单快捷入口</span></p>
        <span @click="go('/tokenConfig/tokenIndex')" class="situation_title">
          <svg-icon icon-class="cjgl" style="font-size: 1.5rem;" />
          token管理</span>
        <span @click="go('/dataOpenConfig/interDataConfig')" class="situation_title">
          <svg-icon icon-class="configure" style="font-size: 1.5rem;" />
          数据采集库表配置</span>
        <span @click="go('/dataOpenConfig/interDataOpenConfig')" class="situation_title">
          <svg-icon icon-class="gllll" style="font-size: 1.5rem;" />
          数据采集开放配置</span>
        <span @click="go('/interConfig/dataZfInterAdmin')" class="situation_title">
          <svg-icon icon-class="ywpz" style="font-size: 1.5rem;" />
          实时接口管理</span>
      </div>
      <div class="item itemRight" style="width:48%;">
        <div class="item itemLeft">
        <p><i></i><span>接口健康监测</span></p>
        <div class="monitor" @click="monitorFun(1)">
          <span><svg-icon icon-class="aq" style="font-size:28px;" /><i style="top: -6px;">正常</i></span>
         <i>数量：<a href="javascript:void(0)">{{ activeInfo.normal }}</a></i>
        </div>
        <div class="monitor" @click="monitorFun(0)">
          <span style="top:18px;"><svg-icon icon-class="yc" style="font-size:28px;" /><i style="top: -6px;">异常</i></span>
          <i>数量：<a href="javascript:void(0)">{{ activeInfo.abnormal }}</a></i>
        </div>
      </div>
      </div>
    </div>
    <div class="rowClas rowTow" style="padding: 0 10px;">
      <div class="item itemLeft" style="display: block;">
        <p><i></i><span>异常接口</span></p>
        <div style="width:100%">
          <div class="moveTab"><span>名称</span><span>接口类别</span><span>接口异常原因</span><span>操作</span></div>
          <div class="rollContent" @mouseenter="clearTimer" @mouseleave="scroll">
            <div ref="rollContent">
              <p v-for="(item,index) in supersionAbnormalList" :key="index">
                <span>{{ item.name }}</span><span>{{ item.type }}</span>
                <span :title="item.reason">{{ item.reason }}</span>
                <span><el-button @click="getdetile(item)" type="text" size="mini">详情</el-button></span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="item2 itemRight">
        <p><i></i><span>接口文档</span></p>
        <el-table
          :data="docList"
          @row-dblclick="getDetele"
          :header-cell-style="getRowClass"
          border
          height="200"
          style="width: 100%;">
          <el-table-column
            prop=""
            header-align="center"
            type="index"
            align="center"
            width="120"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="docName"
            header-align="center"
            align="center"
            label="文档名称">
          </el-table-column>
          <el-table-column
            prop="docInfo"
            header-align="center"
            align="center"
            label="文档信息">
            <template slot-scope="scope">
              <div style="width:250px;display: inline-block;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;">
              {{ scope.row.docInfo }}
            </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right;">
          <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-sizes="[5, 10, 20, 100]"
                :page-size="pageSize"
                :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper">
              </el-pagination>
        </div>
      </div>
    </div>
<!-- 文档详情 -->
    <el-dialog
      title="接口文档详情"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="45%">
      <div v-html="docKeysList" class="interfaceContent">

      </div>
      <span slot="footer" class="dialog-footer">
      </span>
    </el-dialog>

<!-- 健康检测 -->
<el-dialog
      title="接口检测"
      :visible.sync="interfaceVisible2"
      :close-on-click-modal="false"
      width="70%">
      <div class="dialogContent">
        <el-table
          :data="getDetele2"
          :header-cell-style="getRowClass"
          border
          height="500"
          style="width: 100%;">
          <el-table-column
            prop=""
            header-align="center"
            type="index"
            align="center"
            width="120"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="interfaceName"
            header-align="center"
            align="center"
            label="接口名">
          </el-table-column>
          <el-table-column
            prop="type"
            header-align="center"
            align="center"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="url"
            header-align="center"
            align="center"
            label="URL">
          </el-table-column>
          <el-table-column
            prop="status"
            header-align="center"
            align="center"
            label="状态">
            <template slot-scope="scope">
              <div>{{ scope.row.status=='1'?'正常':'异常'}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="reason"
            v-if="type==0"
            header-align="center"
            align="center"
            label="异常原因">
          </el-table-column>
        </el-table>
      </div>
      <div style="text-align: right;">
        <el-pagination
        @size-change="sizeChangeHandle2"
        @current-change="currentChangeHandle2"
        :current-page="pageIndex2"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize2"
        :total="totalPage2"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      </div>
    </el-dialog>

    <el-dialog title="异常接口详情" width="45%" :visible.sync="dialogTableVisible">
       <div class="detleClass">
        <p><span class="label">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</span>
          <span style="background: #f2f5f8;padding: 5px 10px;font-size: 12px;">{{ detileInfo.name }}</span></p>
        <p><span class="label">异常原因：</span>
          <span style="background: #f2f5f8;padding: 5px 10px;font-size: 12px;display: inline-block;max-height:200px;overflow-y: scroll;">{{ detileInfo.reason }}</span></p>
       </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
  export default {
    data () {
      return {
        detileInfo:{},
        dialogTableVisible:false,
        type:-1,
        getDetele2:[],
        docKeysList:null,
        pageIndex: 1,
        pageSize:5,
        totalPage: 0,
        pageIndex2: 1,
        pageSize2:10,
        totalPage2: 0,
        timer:null,
        docList:[],
        step:0,
        interfaceVisible2:false,
        dialogVisible:false,
        activeInfo:{},
        supersionAbnormalList:[]
      }
    },
    mounted () {
      this.getActiveInfo()
      this.getSupersionAbnormalList()
      this.getDocList()
    },
    methods: {
      getRowClass({ rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return 'background:#f2f5f8;fontSize:14px;color:#515a6e;'
      }
    },
      getdetile(v){
        this.detileInfo = v
        this.dialogTableVisible = true
      },
            // 每页数
      sizeChangeHandle2 (val) {
        this.pageSize2 = val
        this.pageIndex2 = 1
        this.getErrorAndSuccessList()
      },
      // 当前页
      currentChangeHandle2 (val) {
        this.pageIndex2 = val
        this.getErrorAndSuccessList()
      },
      getErrorAndSuccessList(v){
        request({
            url: `/ht-datadevelop/supersion/list`,
            method: 'post',
            data:{
              "status":v,
              "page": this.pageIndex2+'',
              "limit": this.pageSize2+''
            }
          }).then((res) => {
            if (res.code === 200) {
              this.getDetele2 = res.data.list
              this.totalPage2 = res.data.totalCount
            }
          })
      },
      monitorFun(v){
        this.type = v
        this.pageIndex2=1
        this.pageSize2=10
        this.totalPage2=0
        this.getErrorAndSuccessList(v)
        this.interfaceVisible2 = true;
      },
      getDetele(v){
        this.dialogVisible = true
        this.docKeysList = v.docInfo
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDocList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDocList()
      },

      // 滚动动画
      scroll() {
        if(this.supersionAbnormalList.length<3){
          return
        }
        let box = this.$refs.rollContent
        let height = box.clientHeight
        let pos = height - 0 //75
        this.clearTimer()
        this.timer = setInterval(() => {
          if (this.step < pos) {
            box.style.top = -this.step + 'px'
            this.step++
          } else if (this.step === pos) {
            this.step = 0
          }
        }, 50)
      },
      clearTimer() {
        clearInterval(this.timer)
      },

      gotoDetile(){
        this.dialogVisible = true;
      },
      getSupersionAbnormalList(){
        request({
            url: '/ht-datadevelop/supersion/getSupersionAbnormal',
            method: 'get',
            params:{}
          }).then((res) => {
            if (res.code === 200) {
              this.supersionAbnormalList = res.data
              this.$nextTick(()=>{
                if(this.supersionAbnormalList.length>2){
                  this.scroll()
                }else{
                  this.$refs.rollContent.style.top = '0px'
                }
              })
            }
          })
      },
      //获取文档列表
      getDocList(){
        request({
            url:'/ht-datadevelop/sys/doc/list',
            method: 'post',
            data:{
              'page': this.pageIndex+'',
              'limit': this.pageSize+'',
              'docName':this.docName
            }
          }).then((res) => {
            if (res.code === 200) {
              this.docList = res.data.list
              this.totalPage = res.data.totalCount
            }
          })
      },
      getActiveInfo(){
        request({
            url: '/ht-datadevelop/supersion/getSupersionCount',
            method: 'get',
            params:{}
          }).then((res) => {
            if (res.code === 200) {
              this.activeInfo = res.data
            }
          })
      },
      go(v){
        this.$router.push({path:v})
      }
    }
  }
</script>

<style lang="scss">

.detleClass{
  p{
    display: flex;
    flex-direction: row;
    padding:10px 0;
    span:last-child{
      flex:1;
      color: #515a6e;
    }
    .label{
      width:80px;
      font-size: 14px;
      font-weight: bold;
      color: #515a6e;
    }
  }
}
.interfaceContent{
  background: #1d1c25;
  color: #e5e5e5;
  border-radius: 4px;
  padding: 10px;
  min-height: 200px;
}
   .home{
    .dialogContent{
      .POne{
        background: #eee;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-align: center;
        span{
          width:33%;
          i{
            font-style: normal;
            display: block;
          }
        }
      }
    }
    .rowClas{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      margin-bottom:30px;
      .item{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          vertical-align: top;
          ul{
            li{
              padding:4px 0;
              line-height:25px;
              color: #5a5a5a;
              margin-bottom:20px;
            }
            .libold{
              font-weight: bold;
              color: #000;
              margin-bottom:0;
            }
          }
          >p{
            font-weight: bold;
            font-size: 15px;
            height:36px;
            color: #515a6e;
            width:100%;
            position: relative;
            a{
              cursor: pointer;
              position: absolute;
              right: 6px;
              font-size: 16px;
            }
            i{
              display: inline-block;
              width:5px;
              border-left: 5px solid #2778bd;
              height:50%;
              background: #515a6e;
              margin-right: 10px;
              position: relative;
              top: 4px;
            }
          }
          .situation_title:nth-child(2){
              background:  linear-gradient(to top right,#fff,#4aa5ca);
          }
          .situation_title:nth-child(3){
            background:  linear-gradient(to top right,#fff,#ffac55);
          }
          .situation_title:nth-child(4){
            background:  linear-gradient(to top right,#fff,#9eb1ff);
          }
          .situation_title:nth-child(5){
            background:  linear-gradient(to top right,#fff,#21c1f0);
          }
          >span{
            text-align: right;
            display: inline-block;
            font-size: 0.8rem;
            border-radius: 10px;
            width:24%;
            height:80px;
            line-height:80px;
            margin:16px 0;
            cursor: pointer;
            letter-spacing: 2px;
            color: #fff;
            position: relative;
            padding-right: 10px;
            svg{
              font-size:46px;
              margin-right: 4px;
              position: absolute;
              left:0.8rem;
              top:28px;
              color: #fff;
              opacity: 1;
            }
          }
          >span:nth-child(2):hover{
            box-shadow: 0 0 5px #d8d8d8, 0 0 12px #4aa5ca;
          }
          >span:nth-child(3):hover{
            box-shadow: 0 0 5px #d8d8d8, 0 0 12px #ffac55;
          }
          >span:nth-child(4):hover{
            box-shadow: 0 0 5px #d8d8d8, 0 0 12px #9eb1ff;
          }
          >span:nth-child(5):hover{
            box-shadow: 0 0 5px #d8d8d8, 0 0 12px #21c1f0;
          }
        }
      .item2{
        >p{
          font-weight: bold;
          font-size: 15px;
          height:36px;
          color: #515a6e;
          width:100%;
          position: relative;
          a{
            cursor: pointer;
            position: absolute;
            right: 6px;
            font-size: 16px;
          }
          i{
            display: inline-block;
            width:5px;
            height:50%;
            background: #2778bd;
            margin-right: 10px;
            position: relative;
            top: 4px;
          }
        }
        .situation_title:nth-child(2){
            background:#4aa5ca;
        }
        .situation_title:nth-child(3){
          background:#f34967;
        }
        .situation_title:nth-child(4){
          background:#36c49f;
        }
        .situation_title:nth-child(5){
          background:#7a6fad;
        }
        .situation_title:nth-child(6){
          background:#21c1f0;
        }
        >span{
          text-align: right;
          display: inline-block;
          font-size: 16px;
          border:1px solid #eee;
          border-radius: 10px;
          width:18%;
          height:100px;
          line-height:100px;
          font-weight: bold;
          margin-right: 20px;
          cursor: pointer;
          letter-spacing: 2px;
          color: #fff;
          position: relative;
          padding-right: 30px;
          i{
            font-size:76px;
            margin-right: 4px;
            position: absolute;
            left:10px;
            top:13px;
            opacity: 0.3;
          }
        }
        >span:hover{
          box-shadow: 0 0 13px #d8d8d8, 0 0 15px #a5a5a5;
        }
      }
    }
    .rowOne{
      display: flex;
      flex-direction: row;
      .itemLeft{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
      .itemRight{
        width:48%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .monitor{
          width: 48%;
          position: relative;
          text-align: center;
          text-align: right;
          display: inline-block;
          font-size: 14px;
          border-radius: 10px;
          height: 80px;
          line-height: 80px;
          letter-spacing: 2px;
          position: relative;
          cursor: pointer;
          i{
            font-style: normal;
            font-size: 14px;
            color: #fff;
            margin-right: 40px;
            a{
              color: #fff;
              font-size: 36px;
              font-weight: bold;
            }
          }
          span{
            position: absolute;
            left: 30px;
            top:15px;
            width:100px;
            border-radius: 4px;
            text-align: left;
            border-radius: 100%;
            color: #505050;
            height: 50px;
            line-height:60px;
            i{
              font-style: normal;
              position: relative;
            }
            svg{
              font-size:50px;
              color: #fff;
            }
          }
        }
        .monitor:nth-child(2){
          background:  linear-gradient(to top right,#fff,#36c49f);
        }
        .monitor:nth-child(3){
          background:  linear-gradient(to top right,#fff,#f34967);
        }
      }
    }
    .rowTow{
      .itemLeft{
        width:50%;
        .rollContent{
          width:100%;
          height:140px;
          overflow: hidden;
          border:1px solid #f2f5f8;
          border-radius: 4px;
          box-sizing:border-box;
          position: relative;
          >div{
            top: 120px;
            position: absolute;
            width:100%;
            >p{
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              justify-content: space-between;
              padding:10px 20px;
            span{
              width:20%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: center;
            }
          }
          >p:hover{
            background:#f2f5f8;
          }
          }
        }
        .moveTab{
          display: flex;
          width:100%;
          background: #f2f5f8;
          height:42px;
          position: relative;
          span{
            width:26%;
            border-right:1px solid #dfe6ec;
            border-top:1px solid #dfe6ec;
            line-height: 40px;
            text-align: center  ;
            font-weight: bold;
            box-sizing: border-box;
            padding-top:2px;
          }
        }
      }
      .itemRight{
        width:48%;

      }
    }
    .rowThr{
      .itemLeft{
        width:48%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .monitor{
          width: 48%;
          background: #E7F3FF;
          height:120px;
          line-height: 120px;
          position: relative;
          text-align: center;
          cursor: pointer;
          i{
            font-style: normal;
            font-size: 24px;
            font-weight: bold;
          }
          span{
            position: absolute;
            left: 30px;
            top:25px;
            width:70px;
            height: 70px;
            border-radius: 4px;
            text-align: center;
            line-height: 70px;
            padding-top:12px;
            i{
              font-size:40px;
              color: #fff;
            }
          }
        }
      }
      .itemRight{
        width:48%;
      }
    }
   }
</style>
